import {StyleSheet, Text, TouchableOpacity, View, TextInput, Image, Linking} from 'react-native'
import React, {useEffect, useState, useRef} from 'react'
import PageScrollView from "@/components/PageScrollView";
import PageTabBar from "@/components/PageTabBar";
import FcButton from "@/components/FcButton";
import FcModal from '@/components/FcModal';
import TabCard from "@/components/TabCard";
import FormTitle from "@/components/FormTitle";
import NoData from "@/components/NoData";
import CopyWriting from "@/components/CopyWriting";
import Popover from 'react-native-popover-view';
import {Video} from 'expo-av';
import {router, useLocalSearchParams} from "expo-router";
import {Toast, Flex} from "@ant-design/react-native";
import {useDispatch, useSelector} from "react-redux";
import {set_videoList} from "@/store/reducer/videoPublish/videoPublishSlice";
import * as ImagePicker from 'expo-image-picker';
import * as VideoThumbnails from 'expo-video-thumbnails';

import {useGetOssInfoMutation} from "@/store/api/login/loginApi";
import {
  useVideoUploadMutation,
  useGetTitleMutation,
  useGeneratePubSchemaMutation,
  useGetAccountAllMutation,
  useVideoPubAddMutation
} from "@/store/api/videoPublish/videoPublishApi";

type Props = {}

const index = (props: Props) => {
  const [tabList, setTabList] = useState([
    {
      name: '抖音发布',
      val: 1,
      icon: require('@/assets/images/aiOriginality/tab_select_left.png'),
      icon1: require('@/assets/images/aiOriginality/tab_noselect_left.png'),
      style: {
        marginRight: -15,
        position: "relative",
        zIndex: 100,
      }
    }, {
      name: '快手发布',
      val: 2,
      icon: require('@/assets/images/aiOriginality/tab_noselect_right.png'),
      icon1: require('@/assets/images/aiOriginality/tab_select_right.png'),
      style: {
        marginLeft: -15,
        position: "relative",
        zIndex: 100,
      }
    }
  ])
  const [listParams, setListParams] = useState({
    pageNo: 1,
    pageSize: 20,
    content: '',
  })
  const [activeTab, setActiveTab] = useState(1)
  const [fileInfo,setFileInfo] = useState<any>(null)
  const [filePath,setFilePath] = useState('')
  const [title, setTitle] = useState('')
  const [temporaryCover, setTemporaryCover] = useState('')
  const [copyWritingOpen, setCopyWritingOpen] = useState(false)
  const [videoList,setVideoList] = useState<any>([])
  const [accountList,setAccountList] = useState<any>([])
  const [accountOpen,setAccountOpen] = useState(false)
  const [visible, setVisible] = useState(false)
  const [ksIndex,setKsIndex] = useState(0)
  const [routeType,setRouteType] = useState<any>('')
  const [videoOpen, setVideoOpen] = useState(false)

  const videoRef = useRef<any>(null);
  
  const [getOssInfoFun] = useGetOssInfoMutation()
  const [getAccountAllFun] = useGetAccountAllMutation()
  const [getTitleFun] = useGetTitleMutation()
  const [videoUploadFun] = useVideoUploadMutation()
  const [generatePubSchemaMutationFun] = useGeneratePubSchemaMutation()
  const [videoPubAddMutationFun] = useVideoPubAddMutation()

  const {type} = useLocalSearchParams()

  const dispatch = useDispatch()
  let p = useSelector(state => state.videoPublish.videoList)
  let contentManage = useSelector(state => state.contentManage.rowData)
  
  useEffect(() => {
    getAccountAllList()
  }, []);

  useEffect(() => {
    setVideoList(p)
    if(type == 'contentManage'){
      init()
    }
    if(type) setRouteType(type)
  }, [p, contentManage, type]);

  const init = async() => {
    let str = contentManage.videoUrl?.split('/')

    const formData = new FormData();
  
    formData.append('biz', 'jeditor');
    formData.append('jeditor', '1');
    formData.append('file', {
      uri: contentManage.videoUrl,
      name: str[str.length - 1],
      type: 'video/mp4',
    });

    videoUploadFun(formData).then(res => {
      if(contentManage.pubType == 1){
        let arr = [{
          accountArr: [],
          title: contentManage.content.split(/【发布语】[:：]?/)[1] || '',
          temporaryCover: contentManage.coverUrl,
          filePath: res.data.result.path,
          fileInfo: {
            uri: contentManage.videoUrl,
            fileName: str[str.length - 1],
          }
        }]
        setActiveTab(2)
        setVideoList(arr)
      }else{
        setTitle(contentManage.content.split(/【发布语】[:：]?/)[1] || '')
        setFilePath(res.data.result.path)
        setFileInfo({
          uri: contentManage.videoUrl,
          fileName: str[str.length - 1],
        })
        setTemporaryCover(contentManage.coverUrl)
      }
    })
  }

  //切换tab
  const handleTabCardClick = (item:any) => {
    setActiveTab(item.val)
  }

  //上传视频
  const uploadFile = async() => {
    let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (permissionResult.granted === false) {
      alert('Permission to access gallery is required!');
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Videos,
      allowsEditing: true, // 可选，允许用户编辑所选图片或视频。
      quality: 1, // 可选，设置图片或视频的质量。0到1之间。1表示最高质量。
    });
    
    if (!pickerResult.canceled) {
      const formData = new FormData();

      formData.append('biz', 'jeditor');
      formData.append('jeditor', '1');
      formData.append('file', {
        uri: pickerResult?.assets[0].uri,
        name: pickerResult?.assets[0].fileName,
        type: 'video/mp4',
      });

      if(activeTab == 1){
        setFileInfo({
          ...pickerResult?.assets[0],
        })


        const { uri: thumbnailUri } = await VideoThumbnails?.getThumbnailAsync(
          pickerResult?.assets[0].uri,
          {
            time: 1000, // 获取视频1秒处的帧
          }
        );
        
        setTemporaryCover(thumbnailUri)
    
        videoUploadFun(formData).then(res => {
          setFilePath(res.data.result.path)
        })
      }else{
        const { uri: thumbnailUri } = await VideoThumbnails?.getThumbnailAsync(
          pickerResult?.assets[0].uri,
          {
            time: 1000, // 获取视频1秒处的帧
          }
        );

        videoUploadFun(formData).then(res => {
          let arr = JSON.parse(JSON.stringify(videoList))

          arr.push({
            fileInfo: {
              ...pickerResult?.assets[0],
              file: null
            },
            filePath: res.data.result.path,
            temporaryCover: thumbnailUri,
            title: '',
            accountArr: [],
            id: getFileNameUUID()
          })
          setVideoList(arr)
        })
      }
    }
  }

  //获取发布账号列表
  const getAccountAllList = () => {
    return new Promise<void>((resolve, reject) => {
      getAccountAllFun({}).then(res => {
        let list = res.data?.result.filter((val:any) => val.sourcePlatform == 'kuaishou') || []
        setAccountList(list)

        resolve()
      })
    })
  }

  //发布视频
  const handlePublishVideo = async() => {
    let loading:any = null
    loading = Toast.loading('发布中')

    if(activeTab == 1){
      if((!fileInfo || !fileInfo.uri) && title) return

      getOssInfoFun({}).then(res => {
        let ossData = res.data.result
        let ossPath = ossData.key + getFileNameUUID() + '.mp4'
        let formData = new FormData();

        formData.append("success_action_status", "200"); // 指定成功上传时，服务端返回状态码200，默认返回204。
        formData.append("policy", ossData.policy);
        formData.append("signature", ossData.signature);
        formData.append("OSSAccessKeyId", ossData.OSSAccessKeyId);
        formData.append("expire", ossData.expire);
        formData.append("key", ossPath);
        formData.append('file', {
          uri: fileInfo.uri,
          name: fileInfo.fileName,
          type: 'video/mp4',
        });

          const xhr = new XMLHttpRequest()
          xhr.open("post", ossData.host, true)

          xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
              let url = 'https://fcaidata.oss-cn-shenzhen.aliyuncs.com/' + ossPath
              console.log("uuuuuuuuuuu", url)
              generatePubSchemaMutationFun({ossPath: url, title: title, shareToPublish: 1}).then(res => {
                Toast.remove(loading)
                Toast.config({ duration: 2})
                Linking.openURL(res.data.result)
              })
            }
          }
          xhr.send(formData)
        })
    }else{
      if(!isVerification()) return
      
      let list = []
      for(let i in videoList){
        let obj:any = {}

        obj.accountIds = videoList[i].accountArr.map((val:any) => val.id)
        obj.coverImagePath = videoList[i].coverImagePath || ''
        obj.coverTsp = videoList[i].coverTsp || 0.01
        obj.filePath = videoList[i].filePath
        obj.pubTimeType = videoList[i].pubTime ? 1 : 0
        obj.pubTime = videoList[i].pubTime || '',
        obj.title = videoList[i].title
        obj.videoDuration = videoList[i].fileInfo.duration
        obj.videoHeight = videoList[i].fileInfo.height
        obj.videoWidth = videoList[i].fileInfo.width
        obj.videoSrc = videoList[i].fileInfo.uri
        obj.originName = videoList[i].fileInfo.fileName
        obj.file = {
          uri: videoList[i].fileInfo.uri,
          name: videoList[i].fileInfo.fileName,
          type: 'video/mp4',
        }
        obj.mountType = 0
        list.push(obj)
      }

      videoPubAddMutationFun({list: list}).then(res => {
        setVideoList([])
        Toast.remove(loading)
        Toast.config({ duration: 2})
        Toast.info('发布成功')
      })
    }
  }

  // 唯一uuid
  const getFileNameUUID = () => {
    function rx() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    return `${+new Date()}${rx()}${rx()}`;
  };

  //选择文案
  const handleCheckCopy = (item:any) => {
    if(activeTab == 1){
      setTitle(item)
    }else{
      let arr = JSON.parse(JSON.stringify(videoList))
      arr[ksIndex].title = item
      setVideoList(arr)
    }
  }

  //选择发布账号
  const handleCheckAccount = (index:any) => {
    let arr = JSON.parse(JSON.stringify(accountList))
    arr[index].checked = !arr[index].checked
    setAccountList(arr)
  }
  //提交发布账号
  const handleSubmitAccount = () => {
    if(accountList.filter((val:any) => val.checked).length == 0) return

    let arr = JSON.parse(JSON.stringify(videoList))
    arr[ksIndex].accountArr = accountList.filter((val:any) => val.checked)
    setVideoList(arr)
    setAccountOpen(false)
  }

  //删除发布账号
  const handleDeleteAccount = (item:any, index:any) => {
    let arr = JSON.parse(JSON.stringify(videoList)); 
    arr[ksIndex].accountArr.splice(index, 1); 
    setVideoList(arr)

    let arr1 = JSON.parse(JSON.stringify(accountList)); 
    let index1 = arr1.findIndex((val:any) => val.id == item.id)
    arr1[index1].checked = false
    setAccountList(arr1)
  }

  //AI编写
  const handleAiTitle = async(path:any, index:any) => {
    Toast.config({ duration: 0})
    let loading = Toast.loading('AI编写中')

    getTitleFun({videoPath: path}).then(res => {
      if(res.data.code === 200){
        Toast.remove(loading)
        Toast.config({ duration: 2})

        if(activeTab == 1){
          setTitle(res.data.result[0])
        }else{
          let arr = JSON.parse(JSON.stringify(videoList))
          arr[index].title = res.data.result[0]
          setVideoList(arr)
        }
      }
    })
  }

  //校验快手内容
  const isVerification = () => {
    if(videoList.length == 0) return false
    
    for(let i in videoList){
      if(!videoList[i].title || videoList[i].accountArr.length == 0){
        return false
      }
    }

    return true
  }

  //跳转到批量操作页面
  const handleJumpBatch= (type:any) => {
    setVisible(false)
    dispatch(set_videoList(videoList))
    router.push(`/videoPublish/batch?type=${type}`); 
  }

  //播放视频
  const handlePlayVideo = async() => {
    setVideoOpen(true);

    setTimeout(() => {
      videoRef.current.playAsync(); // 播放视频
    }, 300)
  }

  return (
    <PageScrollView
      pageTab={
        <PageTabBar
          style={{marginVertical: 10}}
          title={'视频发布'}
          right={
            <TouchableOpacity style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}} onPress={() => router.push('/videoPublish/task')}>
              <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#000000', marginRight: 3}}>&#xe663;</Text>
              <Text>任务列表</Text>
            </TouchableOpacity>
          }
        />
      }
      pageHeader={
        <TabCard tabList={tabList} selectVal={activeTab} onTabCardClick={(val:any) => {if(!routeType) handleTabCardClick(val)}}/>
      }
      pageBottom={
        <Flex justify='center' align='center' style={{height: 56, backgroundColor: '#FFF'}}>
          {
            activeTab == 1 ?
            <FcButton
              onClick={() => handlePublishVideo()}
              type='BjJB'
              colors={fileInfo?.uri && title ? ['#6989FF', '#C65EFD'] : ['rgba(105,137,255,0.4)', 'rgba(198,94,253,0.4)']}
              style={{width: '90%', height: 40, justifyContent: 'center'}}
              itemStyle={{borderRadius: 8, fontSize: 15}}
              textName='发布视频'
            />
            :
            <FcButton
              onClick={() => handlePublishVideo()}
              type='BjJB'
              colors={isVerification() ? ['#6989FF', '#C65EFD'] : ['rgba(105,137,255,0.4)', 'rgba(198,94,253,0.4)']}
              style={{width: '90%', height: 40, justifyContent: 'center'}}
              itemStyle={{borderRadius: 8, fontSize: 15}}
              textName='发布视频'
            />
          }
        </Flex>
      }
    >
      <View>
        <Flex justify='between'>
          <Flex>
            <FormTitle isLeftIcon title='上传视频'/>
            <Text style={{color: 'rgba(0, 0, 0, 0.5)', fontSize: 12}}>格式为mp4\mov类型</Text>
          </Flex>

          {
            activeTab == 2 ?
            <Popover
              isVisible={visible}
              onRequestClose={() => setVisible(false)}
              from={(
                <TouchableOpacity onPress={() => {if(videoList.length > 0) setVisible(true)}}>
                  <Flex>
                    <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: videoList.length > 0 ? '#2856FF' : 'rgba(40,86,255, 0.3)'}}>&#xe797;</Text>
                    <Text style={{color: videoList.length > 0 ? '#2856FF' : 'rgba(40,86,255, 0.3)', marginLeft: 5}}>批量设置</Text>
                  </Flex>
                </TouchableOpacity>
              )}
              popoverStyle={{padding: 15, backgroundColor: 'rgba(0, 0, 0, 0.9)', width: 150, borderRadius: 8}}
              backgroundStyle={{backgroundColor: 'transparent'}}
            >
              <View>
                <TouchableOpacity style={styles.batch_item} onPress={() => handleJumpBatch('write')}>
                  <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe63d;</Text>
                  <Text style={{fontSize: 15, color: '#FFF'}}>AI编写</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.batch_item} onPress={() => handleJumpBatch('account')}>
                  <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe658;</Text>
                  <Text style={{fontSize: 15, color: '#FFF'}}>设置发布账号</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.batch_item} onPress={() => handleJumpBatch('pubTime')}>
                  <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe64c;</Text>
                  <Text style={{fontSize: 15, color: '#FFF'}}>设置发布时间</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.batch_item} onPress={() => handleJumpBatch('delete')}>
                  <Text style={{fontFamily: 'FcIconFont', fontSize: 18, color: '#FFF', marginRight: 8}}>&#xe61d;</Text>
                  <Text style={{fontSize: 15, color: '#FFF'}}>删除</Text>
                </TouchableOpacity>
              </View>
            </Popover>
            : null
          }
        </Flex>
        
        {
          activeTab == 1 ?
          <View>
            {
              !fileInfo || fileInfo?.uri == '' ? 
              <View>
                <TouchableOpacity style={styles.upload_video} onPress={() => uploadFile()}>
                  <Flex style={{height: '100%'}} justify='center' align='center'>
                    <Text style={{fontFamily: 'FcIconFont',fontSize: 22,color: '#0256FF'}}>&#xe643;</Text>
                    <Text style={{color: '#0256FF', marginLeft: 3}}>点击上传</Text>
                  </Flex>
                </TouchableOpacity>
              </View>
              :
              <View style={{backgroundColor: '#FFF', padding: 14, borderRadius: 8}}>
                <View style={{height: 200, display: 'flex', flexDirection: 'row', position: 'relative'}}>
                  <View style={{width: '35%', height: '100%', backgroundColor: '#000', borderRadius: 8}}>
                    <TouchableOpacity onPress={() => handlePlayVideo()}>
                      <Image style={{width: '100%', height: '100%', borderRadius: 8}} resizeMode={'cover'} source={{uri: temporaryCover}}></Image>
                    </TouchableOpacity>
                  </View>
                  <View style={{flex: 1, marginLeft: 10, display: 'flex', flexDirection: 'column'}}>
                    <Flex justify='between'>
                      <Text>标题/发布语</Text>
                      {
                        !routeType ? 
                        <TouchableOpacity onPress={() => {setTitle(''); setFileInfo(null)}}>
                          <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: '#000'}}>&#xe61d;</Text>
                        </TouchableOpacity>
                        : null
                      }
                      
                    </Flex>
    
                    <TextInput
                      style={[styles.content_input, {flex: 1}]}
                      multiline={true}
                      value={title}
                      placeholderTextColor={'rgba(0, 0, 0, 0.3)'}
                      placeholder={'请输入'}
                      onChangeText={(val) => setTitle(val)}
                    />
                    <Flex style={{position: 'absolute', bottom: 8, right: 10}}>
                      <TouchableOpacity style={[styles.btn, {marginRight: 5}]} onPress={()=> setCopyWritingOpen(true)}>
                        <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: '#2856FF'}}>&#xe655;</Text>
                        <Text style={{color: '#2856FF', fontSize: 12, marginLeft: 3}}>导入发布语</Text>
                      </TouchableOpacity>
    
                      <TouchableOpacity style={styles.btn} onPress={()=> handleAiTitle(filePath, null)}>
                        <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: '#2856FF'}}>&#xe63d;</Text>
                        <Text style={{color: '#2856FF', fontSize: 12, marginLeft: 3}}>AI编写</Text>
                      </TouchableOpacity>
                    </Flex>
                  </View>
                </View>
              </View>
            }
          </View>
          :
          <View>
            <View>
              <TouchableOpacity style={styles.upload_video} onPress={() => uploadFile()}>
                <Flex style={{height: '100%'}} justify='center' align='center'>
                  <Text style={{fontFamily: 'FcIconFont',fontSize: 22,color: '#0256FF'}}>&#xe643;</Text>
                  <Text style={{color: '#0256FF', marginLeft: 3}}>点击上传</Text>
                </Flex>
              </TouchableOpacity>
            </View>
            {
              videoList.map((item:any, index:any) => (
                <View key={index} style={{backgroundColor: '#FFF', padding: 14, borderRadius: 8, marginTop: 10}}>
                  <View>
                    <View style={{height: 200, display: 'flex', flexDirection: 'row', position: 'relative'}}>
                      <View style={{width: '35%', height: '100%', backgroundColor: '#000', borderRadius: 8}}>
                        <TouchableOpacity onPress={() => {setKsIndex(index); handlePlayVideo()}}>
                          <Image style={{width: '100%', height: '100%', borderRadius: 8}} resizeMode={'cover'} source={{uri: item.temporaryCover}}></Image>
                        </TouchableOpacity>

                        <Flex justify='center' style={styles.edit_cover}>
                          <TouchableOpacity onPress={() => {dispatch(set_videoList(videoList)), router.push(`/videoPublish/editCover?id=${item.id}`)}}>
                            <Flex style={styles.edit_cover_box} justify='center'>
                              <Text style={{fontSize: 12, color: '#FFF'}}>编辑封面</Text>
                            </Flex>
                          </TouchableOpacity>
                        </Flex>
                      </View>
                      <View style={{flex: 1, marginLeft: 10, display: 'flex', flexDirection: 'column'}}>
                        <Flex justify='between'>
                          <Text>标题/发布语</Text>
                          {
                            !routeType ? 
                            <TouchableOpacity onPress={() => {let arr = JSON.parse(JSON.stringify(videoList)); arr.splice(index, 1); setVideoList(arr)}}>
                              <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: '#000'}}>&#xe61d;</Text>
                            </TouchableOpacity>
                            : null
                          }
                        </Flex>
        
                        <TextInput
                          style={[styles.content_input, {flex: 1}]}
                          multiline={true}
                          value={item?.title}
                          placeholderTextColor={'rgba(0, 0, 0, 0.3)'}
                          placeholder={'请输入'}
                          onChangeText={(val) => {let arr = JSON.parse(JSON.stringify(videoList)); arr[index].title = val; setVideoList(arr)}}
                        />
                        <Flex style={{position: 'absolute', bottom: 8, right: 10}}>
                          <TouchableOpacity style={[styles.btn, {marginRight: 5}]} onPress={()=> {setCopyWritingOpen(true), setKsIndex(index)}}>
                            <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: '#2856FF'}}>&#xe655;</Text>
                            <Text style={{color: '#2856FF', fontSize: 12, marginLeft: 3}}>导入发布语</Text>
                          </TouchableOpacity>
        
                          <TouchableOpacity style={styles.btn} onPress={()=> handleAiTitle(item.filePath, index)}>
                            <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: '#2856FF'}}>&#xe63d;</Text>
                            <Text style={{color: '#2856FF', fontSize: 12, marginLeft: 3}}>AI编写</Text>
                          </TouchableOpacity>
                        </Flex>
                      </View>
                    </View>

                    <View style={{borderTopWidth: 0.5, borderColor: 'rgba(0, 0, 0, 0.1)', marginTop: 16}}></View>

                    <FormTitle title='选择发布账号'/>
                    <TouchableOpacity onPress={() => {setKsIndex(index); setAccountOpen(true)}}>
                      <View style={styles.item_wrap}>
                        {
                          item?.accountArr?.length > 0 ?
                            <Flex wrap='wrap' style={{flex: 1}}>
                            {
                              item?.accountArr?.map((childrenItem:any, childrenIndex:any) => (
                                <Flex key={childrenIndex} style={{paddingHorizontal: 8, height: 24, borderRadius: 4, backgroundColor: '#FFF', marginRight: 10, marginVertical: 5}}>
                                  <Image style={{width: 20,height: 20, borderRadius: 20}} source={{uri: childrenItem.avatar}} resizeMode={'contain'}></Image>
                                  <Text style={{fontSize: 12, marginLeft: 3, marginRight: 10}}>{childrenItem.nickname}</Text>
                                  <TouchableOpacity onPress={()=> handleDeleteAccount(childrenItem, childrenIndex)}>
                                    <Text style={{fontFamily: 'FcIconFont',fontSize: 16,color: 'rgba(0, 0, 0, 0.5)'}}>&#xe667;</Text>
                                  </TouchableOpacity>
                                </Flex>
                              ))
                            }
                          </Flex>
                          :
                          <Text style={[styles.item_hint]}>请选择</Text>
                        }
                        <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe609;</Text>
                      </View>
                    </TouchableOpacity>

                    <FormTitle style={{marginTop: 8}} title='设置发布时间'/>
                    <TouchableOpacity onPress={() => {}}>
                      <View style={styles.item_wrap}>
                        <Text style={[false ? styles.item_label : styles.item_hint]}>{false || '立即发布'}</Text>
                        <Text style={{fontFamily: 'FcIconFont', fontSize: 20, color: '#79797A'}}>&#xe64c;</Text>
                      </View>
                    </TouchableOpacity>
                  </View>
                </View>
              ))
            }
          </View>
        }

        {/* 选择文案 */}
        <CopyWriting
          isOpen={copyWritingOpen}
          onClose={() => setCopyWritingOpen(false)}
          onConfirm={(item:any) => handleCheckCopy(item)}
        ></CopyWriting>

        {/* 发布账号弹窗 */}
        <FcModal
          isOpen={accountOpen}
          onFcModalClose={() => setAccountOpen(false)}
          titleText='批量选择发布账号'
          titleBottomBorderWidth={0}
          bottom={
            <View style={styles.modal_bottom}>
              <Text style={{color: 'rgba(0, 0, 0, 0.3)'}}>已选{ accountList.filter((val:any) => val.checked).length }个</Text>

              <FcButton
                onClick={() => handleSubmitAccount()}
                type='BjJB'
                colors={accountList.filter((val:any) => val.checked).length > 0 ? ['#6989FF', '#C65EFD'] : ['rgba(105,137,255,0.4)', 'rgba(198,94,253,0.4)']}
                style={{width: 120, height: 40, justifyContent: 'center'}}
                itemStyle={{borderRadius: 8, fontSize: 15}}
                textName='确定'
                borderWidth={1}
              />
            </View>
          }
        >
          <View style={{backgroundColor: '#F1F2F4', paddingHorizontal: 16, paddingBottom: 10, flex: 1}}>
            {
              accountList.length == 0 ?
              <Flex justify='center' style={{flex: 1}}>
                <NoData hintText='暂无数据'/>
              </Flex>
              :
              accountList.map((item:any, index:any) => (
                <Flex key={index} style={[styles.account_item]}>
                  <TouchableOpacity style={[styles.select_icon, item.checked && styles.select_active]} onPress={() => {handleCheckAccount(index)}}>
                    {item.checked && <Text style={{fontFamily: 'FcIconFont', fontSize: 16, color: 'white'}}>&#xe64d;</Text>}
                  </TouchableOpacity>
                  <Image style={{width: 32,height: 32, borderRadius: 32, marginRight: 10}} source={{uri: item.avatar}} resizeMode={'contain'}></Image>
                  <Text>{ item.nickname }</Text>
                </Flex>
              ))
            }
          </View>
        </FcModal>

        {/* 视频弹窗 */}
        <FcModal
          isOpen={videoOpen}
          transparent
          closeShow={true}
          animationType='fade'
          onFcModalClose={() => setVideoOpen(false)}
          style={{width: 300, borderBottomRightRadius: 12, borderBottomLeftRadius: 12}}
          titleBottomBorderWidth={0}
        >
          <Video
            ref={videoRef}
            style={{ height: 500 }}
            source={{ uri: activeTab == 1 ? fileInfo?.uri : videoList[ksIndex]?.fileInfo?.uri}} // 视频 URL
            useNativeControls
            resizeMode='contain'
            isLooping={false}
          />
        </FcModal>
      </View>
    </PageScrollView>
  )
}

export default index

const styles = StyleSheet.create({
  upload_video: {
    width: '100%',
    height: 56,
    borderRadius: 8,
    borderWidth: 0.5,
    borderStyle: 'dashed',
    borderColor: '#0256FF',
    backgroundColor: '#FFF'
  },
  content_input: {
    backgroundColor: '#F1F2F4',
    color: 'rgba(0,0,0,0.9)',
    lineHeight: 26,
    paddingBottom: 40,
    paddingHorizontal: 12,
    borderRadius: 8,
    marginTop: 5,
    textAlignVertical: 'top',
  },
  btn: {
    paddingHorizontal: 8,
    height: 28,
    borderRadius: 6,
    backgroundColor: '#FFF',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  item_wrap: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: 'space-between',
    minHeight: 56,
    paddingHorizontal: 12,
    backgroundColor: '#F1F2F4',
    borderRadius: 8,
    paddingVertical: 10,
  },
  item_label: {
    fontSize: 17,
    color: 'rgba(0,0,0,0.9)'
  },
  item_hint: {
    fontSize: 17,
    color: 'rgba(0,0,0,0.3)'
  },
  account_item: {
    height: 72,
    borderRadius: 8,
    marginTop: 10,
    paddingHorizontal: 12,
    backgroundColor: '#FFF',
  },
  select_icon: {
    width: 20,
    height: 20,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.5)',
    marginRight: 12,
  },
  select_active: {
    borderColor: '#2856FF',
    backgroundColor: '#2856FF',
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "center"
  },
  modal_bottom: {
    height: 76,
    display: 'flex',
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
  },
  batch_item: {
    display: 'flex', 
    flexDirection: 'row', 
    alignItems: 'center', 
    height: 40
  },
  edit_cover: {
    width: '100%',
    borderRadius: 8,
    position: 'absolute',
    bottom: 8,
  },
  edit_cover_box: {
    width: 72,
    height: 28,
    borderRadius: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
  }
})